<template>
  <div class="container">
    <el-form :inline="true" :model="queryForm" ref="queryForm">
      <el-form-item>
        <el-input v-model="queryForm.keyword" size="small" clearable placeholder="角色名称/角色别名" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" round @click="query()">搜索</el-button>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button v-if="isAuth('sys:role:add')" type="success" icon="el-icon-plus" size="small" @click="add()">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%;"
      border
      :height="countHeight"
      v-loading="tableLoading"
    >
      <el-table-column header-align="center" prop="isSys" label="系统角色" align="center" width="90">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isSys === 0"  type="danger">否</el-tag>
          <el-tag v-else  type="success">是</el-tag>
        </template>
      </el-table-column>
      <el-table-column header-align="center" prop="roleId" label="角色名称" width="180"></el-table-column>
      <el-table-column header-align="center" prop="roleName" label="角色别名" width="180"></el-table-column>
      <el-table-column header-align="center" prop="createTime" label="创建时间" align="center" width="120"></el-table-column>
      <el-table-column header-align="center" prop="roleDesc" label="描述" show-overflow-tooltip></el-table-column>
      <el-table-column header-align="center" align="center" fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-tooltip content="编辑" v-if="isAuth('sys:role:edit')" placement="top">
            <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row.roleId)"></el-button>
          </el-tooltip>
          <el-tooltip content="授权" v-if="isAuth('sys:role:auth')" placement="top">
            <el-button size="mini" type="warning" icon="el-icon-s-custom" circle @click="handleAuth(scope.row.roleId)"></el-button>
          </el-tooltip>
          <el-tooltip content="删除" v-if="isAuth('sys:role:del') && scope.row.isSys === 0" placement="top">
            <el-button size="mini" type="danger" icon="el-icon-close" circle @click="handleDel(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      width="100%"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 模态框 角色 新增/编辑 -->
    <dialog-role ref="dialogRole" @refreshData="getDataList"></dialog-role>
    <!-- 模态框 角色 授权的资源树 -->
    <dialog-tree-resource ref="treeMenu"></dialog-tree-resource>
  </div>
</template>
<script>
  import roleDialog from './dialog/roleModule.vue'
  import menuTree from './tree/menuChoose.vue'
  import { isAuth } from '@/utils'

  export default {
    name: 'zb-role',
    data () {
      return {
        pageIndex: 1, //当前页码
        pageSize: 10,
        totalPage: 0,
        tableData: [],
        tableLoading: false,
        queryForm: {keyword: ''}, // 搜索框表单
        menuData: []
      }
    },
    created() {
      this.getMenuData()
    },
    activated () {
      this.getDataList()
    },
    computed: {
      countHeight() {
        return window.screen.availHeight - 340
      }
    },
    methods: {
      getMenuData(){
        if (!isAuth('sys:menu:view')) {
          return
        }
        this.$http.get(this.$http.adornUrl('/sys/menu/list')).then(response => {
          const result = response.data
          if (result && result.code === 200) {
            this.menuData = result.data
          } else {
            this.$message({message: '获取资源列表失败！' + result.msg, type: 'error'})
          }
        }).catch((reason) => {
          this.$message({message: reason, type: 'error'})
        })
      },
      getDataList() {
        if (!isAuth('sys:role:view')) {
          return
        }
        const data = {
          page: this.pageIndex,
          limit: this.pageSize,
          name: this.queryForm.keyword
        }
        this.tableLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/role/list'),
          method: 'get',
          params: this.$http.adornParams(data)
        }).then(response => {
          const result = response.data
          if (result && result.code === 200) {
              this.tableData = result.data.dataList
              this.totalPage = result.data.totalCount
          } else {
            this.$message({message: result.msg, type: 'error'})
          }
          this.tableLoading = false
        }).catch(reason => {
          this.$message({message: reason, type: 'error'})
          this.tableLoading = false
        })
      },
      add(){
        const params = {type: 'add'}
        this.$nextTick(() => {
          this.$refs['dialogRole'].init(params)
        })
      },
      query(){
        this.pageIndex = 1
        this.pageSize = 10
        this.getDataList()
      },
      handleCurrentChange(val) {
        this.pageIndex = val
        this.getDataList()
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getDataList()
      },
      handleEdit(id) {
        const params = {type: 'edit', id: id}
        this.$nextTick(() => {
          this.$refs['dialogRole'].init(params)
        })
      },
      handleDel(data) {
        this.$confirm('是否删除角色[' + data.roleName + ']?', '提示', {type: 'warning'}).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/sys/role/info/${data.roleId}`),
            method: 'delete'
          }).then(response => {
            const result = response.data
            if (result && result.code === 200) {
              this.$message({message: '删除角色' + result.msg, type: 'success'})
              this.getDataList()
            } else {
              this.$message({message: '删除角色' + result.msg, type: 'error'})
            }
          }).catch(reason => {
            this.$message({message: reason, type: 'error'})
          })
        }).catch(() => {})
      },
      handleAuth(id) {
        const params = {data: this.menuData, id: id}
        this.$nextTick(() => {
          this.$refs['treeMenu'].init(params)
        })
      }
    },
    components: {
      'dialog-role': roleDialog,
      'dialog-tree-resource': menuTree
    }
  }
</script>
<style>
</style>
